/* eslint-disable no-nested-ternary */
/*
 * @Author: your name
 * @Date: 2021-05-07 16:47:38
 * @LastEditTime: 2021-06-09 19:14:20
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \umi\src\pages\renewalDetail\index.tsx
 */
import { Table, Checkbox } from 'antd';
import { connect, history } from 'umi';
import type { ConnectState } from '@/models/connect';
import type { ConnectProps } from 'umi';
import _ from 'underscore';
import classNames from 'classnames';
import { Component } from 'react';
import styles from './index.less';
import type { smsColumns } from '@/pages/renewalPanel/data.d';
import { ProductStatus, FeatureTypes } from '@/pages/renewalDetail/data.d';
import type { IMatch, IProductDetail, IProductVo } from '@/pages/renewalEdite/data.d';

const PRODUCT_STATUS_MAP: Record<ProductStatus, string> = {
  [ProductStatus.All]: '全部',
  [ProductStatus.WAIT]: '待审',
  [ProductStatus.SALES]: '上架',
  [ProductStatus.UNSALES]: '下架',
  [ProductStatus.TEST]: '测试',
  [ProductStatus.STOP]: '停售',
};

const FEATURE_TYPES_MAP: Record<string, FeatureTypes> = {
  renewal: FeatureTypes.renewalProductVoList,
  origin: FeatureTypes.originalProductVo,
  replace: FeatureTypes.replaceProductVo,
};

export type RenewalPanelProps = {
  match: IMatch;
  productDetail: IProductDetail;
} & Partial<ConnectProps>;

type IState = {
  pageIndex: number;
};

class RenewalDetailPanel extends Component<RenewalPanelProps, IState> {
  constructor(props: RenewalPanelProps) {
    super(props);
    this.state = {
      pageIndex: 1,
    };
  }
  componentDidMount() {
    // eslint-disable-next-line no-console
    console.log('ComponentDidMount', this.props.match.params);
    // 网络请求
    const { id = '' } = this.props.match.params;
    const { dispatch } = this.props;
    if (id || id === '0') {
      if (dispatch) {
        dispatch({
          type: 'renewal/getRenewalProductDetail',
          payload: { id },
        });
      }
    }
  }
  renderPlans = (plans: any): string => {
    const valusArray = _.values(plans);
    if (valusArray.length) {
      return valusArray.join('/');
    }
    return '--';
  };

  render() {
    const columns = [
      {
        title: '通知时间',
        width: 184,
        render: (record: smsColumns) => {
          return `保险到期日${record.pointType === 1 ? '提前' : '延后'}${record.pointValue}天`;
        },
      },
      {
        title: '通知内容',
        dataIndex: 'templateContent',
        key: 'templateContent',
      },
    ];
    const { productDetail } = this.props;
    return (
      <div className={styles.renewalDetailWarp}>
        {/* 顶部商品展示 */}
        <div className={styles.topShows}>
          <div className={styles.bread}>
            <span
              onClick={() => {
                history.push(`/product-management/renewal-list`);
              }}
            >
              续保商品管理
            </span>{' '}
            <span>/</span> <span>{productDetail.productName}</span>
          </div>
          <div className={styles.productName}>{productDetail.productName}</div>
          {/* 小块块展示 */}
          <div className={styles.productInfosWarp}>
            <div className={styles.clo}>
              <div className={styles.item}>
                <div>运营产品ID:</div>
                <div>{productDetail.operProductId}</div>
              </div>

              <div className={styles.item}>
                <div>计划名称:</div>
                <div>{this.renderPlans(productDetail.plans)}</div>
              </div>
            </div>

            <div className={styles.clo}>
              <div className={styles.item}>
                <div>产品类别:</div>
                <div>{productDetail.categoryMasterName}</div>
              </div>

              <div className={styles.item}>
                <div>产品状态:</div>
                <div>{PRODUCT_STATUS_MAP[productDetail.productStatus]}</div>
              </div>
            </div>

            <div className={styles.clo}>
              <div className={styles.item}>
                <div>基础产品ID:</div>
                <div>{productDetail.baseProductId}</div>
              </div>

              <div className={styles.item}>
                <div>基础产品名称:</div>
                <div>{productDetail.baseProductName}</div>
              </div>
            </div>
          </div>
        </div>
        <div className={styles.scrollWarp}>
          {/* 第二回合 续保规则设置 */}
          <div className={classNames(styles.renewalRuleWarp, styles.infoWarp)}>
            <div className={styles.balckTitle}>续保规则设置</div>
            {/* 主要信息展示 */}
            <div className={styles.infoContent}>
              <div className={styles.col}>
                <div>短险续保规则：</div>
                <div>
                  {productDetail.renewalWay || productDetail.renewalWay === 0
                    ? productDetail.renewalWay === 0
                      ? '不支持续保'
                      : productDetail.renewalWay === 1
                      ? '保司续保'
                      : '慧择续保'
                    : '--'}
                </div>
              </div>

              {(productDetail.renewalStartDay || productDetail.renewalStartDay === 0) && (
                <div className={styles.col}>
                  <div>最早可提前续保日：</div>
                  <div>{`${productDetail.renewalStartDay}天`}</div>
                </div>
              )}

              {(productDetail.renewalGracePeriod || productDetail.renewalGracePeriod === 0) && (
                <div className={styles.col}>
                  <div>最晚可提前续保日：</div>
                  <div>{`${productDetail.renewalGracePeriod}天`}</div>
                </div>
              )}

              {productDetail.renewalProductVoList && (
                <div className={styles.col}>
                  <div>续保产品：</div>
                  <div className={styles.choise}>
                    {productDetail.renewalProductVoList.map((ite: IProductVo) => {
                      return (
                        <div className={classNames(styles.productChoise, styles.productChoiseMany)}>
                          <div>{ite.productName}</div>
                          {productDetail.featuredProductId === ite.operProductId &&
                            productDetail.featuredType === FEATURE_TYPES_MAP.renewal && (
                              <div className={styles.prefer}>目前推荐</div>
                            )}
                        </div>
                      );
                    })}
                  </div>
                </div>
              )}

              {productDetail.originalProductVo && (
                <div className={styles.col}>
                  <div>原产品：</div>
                  <div className={styles.productChoise}>
                    <div>{`${productDetail.originalProductVo.productName}`}</div>
                    {productDetail.featuredProductId ===
                      productDetail.originalProductVo.operProductId &&
                      productDetail.featuredType === FEATURE_TYPES_MAP.origin && (
                        <div className={styles.prefer}>目前推荐</div>
                      )}
                  </div>
                </div>
              )}

              {productDetail.replaceProductVo && (
                <div className={styles.col}>
                  <div>替代产品：</div>
                  <div className={styles.productChoise}>
                    <div>{productDetail.replaceProductVo.productName}</div>
                    {productDetail.featuredProductId ===
                      productDetail.replaceProductVo.operProductId &&
                      productDetail.featuredType === FEATURE_TYPES_MAP.replace && (
                        <div className={styles.prefer}>目前推荐</div>
                      )}
                  </div>
                </div>
              )}
            </div>
          </div>

          {/* 第三回合 续保规则设置 */}
          {productDetail.smsTemplateVos && (
            <div className={classNames(styles.renewalRuleWarp, styles.infoWarp)}>
              <div className={styles.balckTitle}>续保通知规则</div>
              {/* 主要信息展示 */}
              <div className={styles.infoContent}>
                <div className={styles.tableWarps}>
                  <div style={{ marginBottom: 20 }}>
                    <Checkbox checked={productDetail.isSmsTip} disabled>
                      是否通知续保
                    </Checkbox>
                  </div>
                  <Table
                    columns={columns}
                    bordered
                    pagination={false}
                    dataSource={productDetail.smsTemplateVos}
                  />
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    );
  }
}

export default connect(({ renewal }: ConnectState) => ({
  productDetail: renewal.productDetail,
}))(RenewalDetailPanel);
